import React, { useEffect, useRef } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'

export default function Input({ type, extra, classNames, autoFocus, onExtraClick, ...rest }) {
	const inputRef = useRef(null)
	// 一般情况下, 移动端没有必要一进入组件就获取焦点, 移动端中如果获取焦点会出现软键盘
	useEffect(() => {
		// 组价可以自己控制是否需要自动获取焦点
		if(autoFocus) {
			inputRef.current.focus()
		}
	}, [])

	return (
		<div className={styles.root}>
			{/* autoFocus在移动端sarfic不兼容 */}
			{/* <input type={type} className={classnames('input', classNames)} {...rest} /> */}
			<input type={type} ref={inputRef} className={classnames('input', classNames)} {...rest} />
			{extra && <div className="extra" onClick={onExtraClick}>{extra}</div>}
		</div>
	)
}
